<template>
  <div class="header">
    <img src="@/public/images/logo.png">
    <i class="iconfont icon-liebiao" @click="showDrawer"></i>

    <cube-drawer ref="drawer" title="请选择" :data="categoryList" @select="selectHandler"></cube-drawer>
  </div>
</template>
<script>
import * as types from "@/store/types";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
    };
  },
  methods: {
    showDrawer() {
      this.$refs.drawer.show();
    },
    selectHandler(selectedVal) {
      this.$store.commit("course/" + types.SET_CATEGORYID, selectedVal[0]);
    }
  },
  mounted() {},
  computed: {
    ...mapGetters("course", ["categoryList"])
  }
};
</script>

<style lang="less">
.header {
  background: #252525;
  height: 50px;
  img {
    height: 30px;
    margin: 10px 0 0 10px;
  }
  i {
    position: absolute;
    color: #fff;
    right: 10px;
    top: 15px;
    font-size: 20px;
  }
}
.cube-drawer-main {
  top: 50px;
  bottom: 50px;
}
</style>